<div class="container" data-ng-app="routesApp" ng-controller="routesController" >
    <div class="row" >
        <div class="span12 blockGray">
            <div class="blockInner">
                <div id="grid" style="margin:0 auto; width:650px"> 
                    <table id="list" align="center">
                        <tr><td></td></tr>
                    </table> 
                    <div id="pager"></div> 
                </div> 
                <br>
                <input type="text" data-ng-model="name">
                {{name}}
                rowdata ={{rowData.name}}
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    
    $("#list").jqGrid({
        url: "Tests/getRoutes",
        datatype: "json",
        mtype: "POST",
        colNames: ["ID", "Clave", "Nombre", "Factor","Estado"],
        colModel: [
            { name: "id", width: 40,align: "right", hidden:true },
            { name: "code", width: 120 },
            { name: "name", width: 250 },
            { name: "factor", width: 80, align: "right" },
            { name: "estado", width: 80, align: "center" }
        ],        
        height:355,
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "name",
        sortorder: "asc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        caption: "Rutas",
        altRows: true,
        jsonReader : {
            repeatitems: false,
            id: "id",
            root: function(data){ return data[0]; },
            page: function(data){ return data[1][0].page; },
            total: function(data){ return data[1][0].totalpages; },
            records: function(data){ return data[1][0].records; }
        }
    });
    
    $("#list").jqGrid('navGrid', '#pager', {
            del: false,
            addfunc: function () {
                //editar(null, null);
            },
            editfunc: function (rowid) {
                rowData = jQuery('#list').jqGrid('getRowData', rowid);
                //alert(rowData.name);
            }
        });
        /*
        $(window).on('resize', function(event, ui) {
                    // Get width of parent container
                    var parWidth = $("#gbox_list").parent().width();
                    var curWidth = $("#gbox_list").width();
                    //console.log("span width " + parWidth + " gridWidth " + gWidth);
                    var w = parWidth - 1; // Fudge factor to prevent horizontal scrollbars
                    if (Math.abs(w - curWidth) > 2)
                    {
                        //alert("resize to " + width);
                        console.log("span width " + parWidth + " gridWidth " + curWidth);    
                        $("#list").setGridWidth(w);
                        console.log("new width " + w);
                    }

                }).trigger('resize');
        */
       
       
}); 

</script>

<script>
    angular.module("routesApp", [])
    .controller("routesController", function($scope) {
      $scope.name = 'Zderan';
      $scope.rowData={};
    });
 </script>
